<template>
  <div class="box">
    <div class="imgBox">
      <img src="@/assets/icons/chahua.png" class="left-img" />
    </div>
    <div class="right-img">
      <div style="background-color: white;border-radius: 16px;padding: 42px;box-shadow: 0 0 8px #ccc2c2;">
        <h1 style="margin-bottom: 40px">注册</h1>
        <div>
          <p class="subtitle">注册账号</p>
          <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="username"
            style="margin-bottom: 15px"></el-input>
          <span class="errormsg">{{ nameMsg }}</span>
        </div>
        <div>
          <p class="subtitle">注册密码</p>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" style="margin-bottom: 15px"
            show-password></el-input>
          <span class="errormsg">{{ pwdMsg }}</span>
        </div>
        <div>
          <v-btn block dark depressed elevation="13" style="margin-bottom: 30px; font-weight: bold"
            @click="register">注册</v-btn>
          <div style="display: flex;flex-direction: row;align-items: center; justify-content: space-between;">
            <a class="span_register" href="/login" style="text-decoration: none;">登录账号→</a>
            <a class="span_register" href="/" style="text-decoration: none;">首页</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserService from "@/service/UserService";
import { Message } from "element-ui";
export default {
  name: "RegisterView",

  data() {
    return {
      username: "",
      password: "",
      nameMsg: "",
      pwdMsg: "",
    };
  },

  mounted() { },

  methods: {
    register() {
      const userInfo = { username: this.username, password: this.password,userType:"student" };
      UserService.register(userInfo)
        .then((res) => {
          if (res.code == 0) {
            Message({
              message: "注册成功，前往登录",
              type: "success",
            });
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          } else {
            this.username = "";
            this.password = "";
          }
        })
        .catch((err) => {
          console.log("error", err);
        });
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-image: url(../assets/icons/background1.png);
  background-size: 100% 100%;
}

.errormsg {
  color: red;
}

.imgBox {
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.left-img {
  width: auto;
  position: relative;
  top: 10%;
}

.right-img {
  /* width: 40%; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subtitle {
  color: #999999;
  font-size: 12px;
  margin-bottom: 12px;
}

.span_register {
  font-size: 12px;
  color: #101010;
  font-weight: bold;
}

.span_register:hover {
  color: blue;
  cursor: pointer;
}
</style>